<template>
  <div class="container">
    <head>
      <meta name="referrer" content="no-referrer" />
    </head>
    <el-card class="box-card">
      <!-- 搜索区域 -->
      <div class="head">
        <div class="search">
          <!-- 输入框区域 -->
          <el-form
            :inline="true"
            class="demo-form-inline"
            :model="searchFrom"
            ref="searchFrom"
          >
            <el-form-item label="关键字" prop="key">
              <el-input
                v-model="searchFrom.key"
                placeholder="根据文章标题搜索"
              ></el-input>
            </el-form-item>
            <el-form-item label="状态" prop="state">
              <el-select placeholder="请选择" v-model="searchFrom.state">
                <el-option label="启动" value="1"></el-option>
                <el-option label="禁用" value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button size="small" @click="empty('searchFrom')"
                >清除</el-button
              >
              <el-button
                type="primary"
                size="small"
                @click="searchArticles('searchFrom')"
                >查询</el-button
              >
            </el-form-item>
          </el-form>
        </div>
        <!-- 添加区域 -->
        <div class="add-article">
          <el-button
            type="success"
            size="small"
            icon="el-icon-edit"
            @click="addArticle"
            >新增技巧</el-button
          >
        </div>
      </div>
      <!-- 提示区域 -->
      <div class="tip">
        <el-alert
          :title="`一共有${articleList.counts}条数据`"
          type="info"
          show-icon
          close-text=" "
        />
      </div>
      <!-- 文章列表区域 -->
      <el-table class="table" style="width: 100%" :data="articleList.items">
        <template>
          <el-table-column type="index" label="序号" align="center" />
          <el-table-column prop="title" label="文章标题" width="400px">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.title }}</span>
              <i
                class="el-icon-film"
                @click="showVideo(scope.row.videoURL)"
                v-if="scope.row.videoURL"
              >
              </i>
            </template>
          </el-table-column>
          <el-table-column prop="visits" label="阅读数" align="center" />
          <el-table-column prop="username" label="录入人" align="center" />
          <el-table-column
            prop="createTime"
            label="录入时间"
            align="center"
            :formatter="parsetime"
          />
          <el-table-column
            prop="state"
            label="状态"
            align="center"
            :formatter="updateStatus"
          />
          <el-table-column label="操作" align="center">
            <template v-slot="{ row }">
              <el-button type="text" size="small" @click="look(row)"
                >预览</el-button
              >
              <el-button
                type="text"
                size="small"
                v-if="showbtn(row)"
                @click="changeState(row)"
                >禁用</el-button
              >
              <el-button
                type="text"
                size="small"
                @click="changeState(row)"
                v-else
                >启用</el-button
              >
              <el-button
                type="text"
                size="small"
                :disabled="Boolean(Number(`${row.state === 0 ? 1 : 0}`))"
                @click="updateContent(row)"
                >修改</el-button
              >
              <el-button
                type="text"
                size="small"
                @click="delArticle(row)"
                :disabled="Boolean(Number(`${row.state === 0 ? 1 : 0}`))"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </template>
      </el-table>
      <div class="block">
        <el-pagination
          background
          layout="prev, pager, next, sizes, jumper"
          :page-sizes="[5, 10, 20, 50]"
          :total="Number(`${articleList.counts}`)"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        >
        </el-pagination>
      </div>
    </el-card>
    <!-- 新增弹出框 -->
    <addArticle :showDialog.sync="showDialog" :id="id" v-if="showDialog" />
    <!-- 预览弹出框 -->
    <PreviewArticle
      :showPreviewDialog.sync="showPreviewDialog"
      :id="id"
      v-if="showPreviewDialog"
    />
    <el-dialog
      title="播放视频"
      :visible.sync="showViewDialog"
      width="60%"
      class="video"
      @close="onClose"
    >
      <div class="close" @click="onClose">
        <i class="el-icon-close"></i>
      </div>
      <div class="videoPlay">
        <video :src="url" autoplay controls width="100%" ref="video" />
      </div>
    </el-dialog>
  </div>
</template>

<script src='./main.js'></script>

<style scoped lang='less'>
.container {
  margin: 10px;
  .block {
    display: flex;
    justify-content: flex-end;
    margin-top: 15px;
  }
}
.head {
  display: flex;
  // align-items: baseline;
  justify-content: space-between;
  .el-form-item {
    margin-left: 20px;
  }
  .el-form-item:last-child {
    margin-left: auto;
  }
  .add-article {
    margin-top: 2px;
  }
}
.table {
  margin-top: 15px;
}
.el-icon-film {
  margin-left: 15px;
  color: blue;
  cursor: pointer;
}
.video {
  .close {
    position: absolute;
    box-sizing: border-box;
    width: 50px;
    height: 50px;
    background-color: rgba(0, 0, 0, 0.7);
    text-align: center;
    line-height: 50px;
    border-radius: 50%;
    font-size: 40px;
    color: #fff;
    left: 50%;
    top: -6%;
    transform: translateX(-50%);
    > i {
      cursor: pointer;
    }
  }
}
</style>
